<template>
  <div>
    <baidu-map
      id="allmap"
      @ready="mapReady"
      :scroll-wheel-zoom="true">
      <bm-marker :position="point" animation="BMAP_ANIMATION_BOUNCE"></bm-marker>
    </baidu-map>
  </div>
</template>
<script>
const openInfo = (content,e,map)=>{
  const opts= {
    width: 250,
    height: 120,
    title:"牧场信息",
    enableMessage:true//设置允许信息窗发送短息
  }
  var p = e.target;
  var point = new BMap(p.getPosition().lng, p.getPosition().lat)
  var infoWindow = new BMap.InfoWindow(
    `
      <div>
        地点：${content[0]}<br/>
        人物：${content[1]}<br/>
        事件：${content[2]}<br/>
      </div>
    `
  ,opts)
  map.openInfoWindow(infoWindow,point); //开启信息窗口
}
export default {
  name: "Test",
  created(){
  },
  data(){  
    return{    
      point: "",
      currentStyle: 0,
      data:[
              {
                lon: 106.304854,
                lat:34.921988,
                address: '地点1',
                people: '周元',
                doThing: '暴揍赵牧神'
              },
              {
                lon: 108.417824,
                lat:33.921910,
                address: '地点2',
                people: '夭夭',
                doThing: '沉睡冰棺'
              },
              {
                lon: 110.517777,
                lat:32.821999,
                address: '地点3',
                people: '吞吞',
                doThing: '死亡历练'
              }
            ],
    }},
    methods:{    
      mapReady({ BMap, map }) {      
        // 选择一个经纬度作为中心点      
        var point = new BMap.Point(108.07597238023368,34.2901584798421);      
        map.centerAndZoom(point, 8); 
        map.enableScrollWheelZoom(true);//启动滚动
        var point = [];
          // 混合图
          let mapType = new BMap.MapTypeControl(
            {
              mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP],
              anchor: BMAP_ANCHOR_TOP_LEFT
            }
          );
          // 鹰眼图
          let overView = new BMap.OverviewMapControl();
          // 比例尺
          let top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});
          // 添加默认缩放平移控件
          let top_left_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL});
          map.addControl(mapType); 
          map.addControl(overView);
          map.addControl(top_left_control);  
          map.addControl(top_left_navigation);  
          for(let i=0;i<this.data.length;i++){
            let point = new BMap.Point(this.data[i].lon,this.data[i].lat)
            let marker = new BMap.Marker(point);  // 创建标注          
            let content = [this.data[i].address,this.data[i].people,this.data[i].doThing] ;   
            let opts= {
              width: 250,
              height: 120,
              title:"牧场信息",
              enableMessage:true//设置允许信息窗发送短息
            }
            let infoWindow = new BMap.InfoWindow(
              `
                <div>
                  地点：${content[0]}<br/>
                  人物：${content[1]}<br/>
                  事件：${content[2]}<br/>
                </div>
              `
            ,opts)
            marker.addEventListener("click", function(){
              map.openInfoWindow(infoWindow, point)
            })
            map.addOverlay(marker);// 将标注添加到地图上
            marker.setAnimation(BMAP_ANIMATION_BOUNCE);
          }
      },
    }
  }
</script>
<style  scoped>
#allmap{
  height: 500px;
  width: 100%;
}
</style>